<!-- 行程报告 -->
<template>
  <view class="content">
    <u-navbar :autoBack="false" title="我的订单" @leftClick="leftClick">
    </u-navbar>
    <!-- 顶部用户信息卡片 -->
    <view class="userCard">
      <view class="userAvatar">
        <image :src="avatar" mode="aspectFit"></image>
      </view>
      <view class="userInfo">
        <view class="name">
          {{ dataList3.wxUser.nickName || '---' }}
        </view>
        <view class="date">
          旅行日期 {{ dataList3.partyInfoVo.startTime != null ? dataList3.partyInfoVo.startTime : '-' }}
        </view>
      </view>
      <view class="completeLogo">
        <image mode="scaleToFill" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/reportIcon.png"></image>
      </view>
    </view>
    <!-- 行程名称卡片 -->
    <view class="planName">
      <view class="tag">
        旅行路线
      </view>
      <view class="nameTitle">
        {{ dataList3.partyInfoVo.lineName }}
      </view>
    </view>
    <!-- 行程数据卡片 -->
    <view class="dataCard">
      <!-- 数据栏 -->
      <view class="dataColumn">
        <view class="columnItem">
          <view class="itemData">
            {{ dataList3.partyInfoVo.scenicCount }}
          </view>
          <text>游玩景点</text>
        </view>
        <view class="columnItem">
          <view class="itemData">
            {{ dataList3.partyInfoVo.successTaskCount }}
          </view>
          <text>完成任务</text>
        </view>
        <view class="columnItem">
          <view class="itemData">
            {{ travelDurationValue }}
            <text>{{ travelDurationUnit }}</text>
          </view>
          <text>旅行时长</text>
        </view>
        <view class="columnItem">
          <view class="itemData">
            {{ Math.ceil(dataList3.partyInfoVo.totalDistance / 100) / 10 }}
            <text>KM</text>
          </view>
          <text>全程</text>
        </view>
      </view>
      <!-- end -->
      <view class="map">
        <map id="map" :include-points="markers" :markers="markers" :polyline="polyline"
             style="width: 100%; height: 300rpx;"></map>
      </view>
    </view>
    <!-- 任务卡片 -->
    <view class="taskCard">
      <view class="cardTitle">
        <text>任务成绩</text>
        <view class="score">
          总分：{{ dataList4.totalPoints ? Math.ceil(dataList4.totalPoints) + '分' : '暂无成绩' }}
        </view>
      </view>

      <view class="taskItemList">
        <view v-for="(item,index) in dataList4.scenicScore" :key="index" class="taskItem">
          <view class="topView">
            <view class="taskName">
              {{ item.scenicName }}
            </view>
            <view class="itemScore">
              {{ item.score }}分
            </view>
          </view>
          <view class="bottomView">
            <view class="numItem">
              <text>任务数：</text>
              {{ item.taskCount }}
            </view>
            <view class="numItemC">
              <text>完成数</text>
              {{ item.successCount }}
            </view>
            <view class="numItem">
              <text>答错数</text>
              {{ item.falseCount }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 感悟卡片 -->
    <view class="reflectCard">
      <view class="reflectTitle">
        <text>行程感悟</text>
        <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/note.png"></image>
      </view>
      <view class="reflectContentList">
        <view class="reflectTag1">
          <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/notetag1.png"></image>
        </view>
        <view v-if="dataList2.length>=1" class="contentList">
          <view v-for="(item,index) in dataList2" class="reflectContent">
            {{ item.apperception || '' }}
            <view v-for="(item,index) in dataList2[0].imageUrls" class="photoItem">
              <image :src="item" mode="scaleToFill"></image>
            </view>
          </view>
        </view>
        <view v-else style="margin: 0 auto;">
          暂无数据
        </view>
        <view class="reflectTag2">
          <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/notetag2.png"></image>
        </view>
      </view>
    </view>

    <!-- 相册卡片 -->
    <view class="albumCard">
      <view class="reflectTitle">
        <text>旅程留影</text>
      </view>
      <view class="albumList">
        <!-- 旅程相册 -->
        <view class="placeAlbum">
          <tui-section background="#fff" is-line margin="0rpx 0rpx 10rpx 0rpx" title="旅程留影"></tui-section>
          <view class="photoList">
            <view v-for="(item,index) in dataList1.itineraryPhotos" class="photoItem">
              <image :src="item.url" mode="scaleToFill"></image>
            </view>
          </view>
        </view>
        <!-- 共享相册 -->
        <view class="placeAlbum">
          <tui-section background="#fff" is-line margin="0rpx 0rpx 10rpx 0rpx" title="共享旅程相册"></tui-section>
          <view class="photoList">
            <view v-for="(item,index) in dataList1.itinerarySharingPhotos" class="photoItem">
              <image :src="item.url" mode="scaleToFill"></image>
            </view>
          </view>
        </view>

        <!-- 景点相册列表-->
        <view class="placeAlbumList">
          <!-- 渲染景点模块 -->
          <view v-for="(item,index) in dataList1.scenics" class="albumItem">
            <!-- 路标icon -->
            <view class="placeIcon">
              <image mode="aspectFit"
                     src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/locIconSelect.png">
              </image>
            </view>
            <!-- 景点名字和折叠按钮 -->
            <view class="placeName">
              <text>{{ item.name }}</text>
              <view @tap="isShowTask(index)">
                <tui-icon :name="[showPlaceTaskList[index].isShow ? 'arrowup' :'arrowdown']"
                          :size="25"></tui-icon>
              </view>
            </view>
            <!-- 景点相册 -->
            <view v-if="showPlaceTaskList[index].isShow" class="placePhotoList">
              <view v-for="(ite,index) in item.scenicPhotos" :key="index" class="photoItem"
                    @tap="previewImagePlace(index)">
                <image :src="ite.url" mode="scaleToFill"></image>
              </view>
            </view>
            <!-- 景点任务渲染模块 -->
            <view v-for="(task,index) in item.tasks" v-if="task.taskPhotos.length>0&&showPlaceTaskList[index].isShow"
                  :key="index"
                  class="taskPhotoItem">
              <!-- 任务名字 -->
              <view class="taskName">
                <text>任务:{{ task.name }}</text>
              </view>
              <!-- 任务照片列表 -->
              <view class="taskPhotoList">
                <view v-for="(p,index) in task.taskPhotos" :key="index" class="photoItem"
                      @click="previewImageTask(index)">
                  <image :src="p.url" mode="scaleToFill"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--图片预览  -->
    <tui-gallery :current="previewCurrent" :show="showMask" :urls="urls" @hide="showMask = false"></tui-gallery>
  </view>
</template>

<script>
import {
  getReflectMy,
  getUserInfoMy,
  getTaskListMy,
  getReportListMy,
  getItineraryReportMy,
  getPlacePhotoList
} from '@/api/tourplan.js'

export default {
  data() {
    return {
      returnType: "",
      delta: 1,
      avatar: '',
      itineraryId: 0,
      partyId: 0,
      groupId: 0,
      dataList1: [],
      dataList2: [],
      dataList3: [],
      dataList4: [],
      dataList6: [],
      showPlaceTaskList: [],
      // 地图map数据
      markers: [],
      polyline: [{
        points: [],
        color: "#2B7BBB",
        width: 5
      }],
      //图片预览
      previewCurrent: 0,
      urls: [],
      showMask: false,
      travelDurationValue: '',
      travelDurationUnit: ''
    }
  },
  onLoad(data) {
    const that = this
    that.initData(data)
    console.log('输出data查看返回', data);
    if (data.returnType) {
      this.returnType = data.returnType
    }
    if (data.deltaNumber) {
      this.delta = Number(data.deltaNumber)
    }
  },
  methods: {
    leftClick() {
      if (this.returnType == 1) {
        uni.navigateBack({
          delta: this.delta,
        });
      }
    },
    initData(data) {
      console.log(data)
      const that = this
      that.avatar = uni.getStorageSync('userinfo').avatar
      that.itineraryId = data.itineraryId
      that.partyId = data.partyId
      that.groupId = data.groupId
      that.getAlbumList()
      that.getData2()
      that.getData3()
      that.getData4()
      that.getData6()

    },
    //接口获取数据函数
    getData1() { //行程留影相册
      const that = this
    },
    getData2() { //行程感悟
      const that = this
      getReflectMy({
        itineraryId: that.itineraryId,
        partyId: that.partyId
      }).then(res => {
        console.log('输出行程感悟', res);
        this.dataList2 = res
      })
    },
    getData3() {
      //查询用户信息
      const that = this;
      getUserInfoMy({
        phone: uni.getStorageSync('userinfo').phone,
        partyId: this.partyId
      }).then(res => {
        this.dataList3 = res;
        this.processTravelDuration();
      });
    },
    processTravelDuration() {
      const travelDuration = this.dataList3.partyInfoVo.travelDuration;
      if (travelDuration === '-' || travelDuration === null) {
        this.travelDurationValue = '-';
        this.travelDurationUnit = '';
      } else {
        //数字
        const durationValue = travelDuration.match(/\d+/) ? travelDuration.match(/\d+/)[0] : '-';
        //单位
        const durationUnit = travelDuration.replace(durationValue, '') || '';

        this.travelDurationValue = durationValue;
        this.travelDurationUnit = durationUnit;
      }
    },

    getData4() {
      //查询任务列表
      const that = this
      getTaskListMy({
        partyId: that.partyId
      }).then(res => {
        this.dataList4 = res
      })
    },

    getData6() {
      //方案信息
      getItineraryReportMy({
        groupId: this.groupId
      }).then(res => {
        this.dataList6 = res
        this.initMap(res.scenicVos)
      })
    },

    getAlbumList() {
      const that = this
      getPlacePhotoList({
        tel: uni.getStorageSync('userinfo').phone,
        itineraryId: this.itineraryId, //不传景点id时是获取旅程相册
      }).then(res => {
        that.dataList1 = res
        that.initShowTask(res.scenics.length)
      })
    },
    //初始化折叠控件数组
    initShowTask(length) {
      for (let i = 0; i < length; i++) {
        this.showPlaceTaskList.push({
          isShow: true
        })
      }
      console.log('折叠控件初始化', this.showPlaceTaskList)
    },
    //折叠点击
    isShowTask(index) {
      const that = this
      that.showPlaceTaskList[index].isShow = !that.showPlaceTaskList[index].isShow
    },

    //初始化轨迹图数据
    initMap(list) {
      const that = this
      //创建地图map对象
      let mapCtx = wx.createMapContext('map');
      //路线
      for (let i = 0; i < list.length; i++) {
        that.polyline[0].points.push({
          longitude: list[i].x,
          latitude: list[i].y
        })
        //标点
        that.markers.push({
          id: i + 1,
          longitude: list[i].x,
          latitude: list[i].y,
          width: 18,
          height: 22,
        })
        //主动触发map对象的includePoints方法
        mapCtx.includePoints({
          padding: [20, 20, 20, 20],
          points: that.markers,
        });
      }
    },

    //图片预览
    previewImagePlace(index) {
      const that = this
      const data = that.dataList1.scenics
      const photoList = data.map(item => item.scenicPhotos)
      const AllPhotoList = photoList.flatMap(innerArray => innerArray)
      this.urls = []
      for (let i = 0; i < AllPhotoList.length; i++) {
        this.urls.push({
          desc: '',
          src: AllPhotoList[i].url
        })
      }
      this.previewCurrent = index
      console.log(this.urls)
      this.showMask = true
    },
    previewImageTask(index) {
      const that = this
      const data = that.dataList1.scenics
      const photoList = data.map(item => item.tasks)
      const AllPhotoList = photoList.flatMap(innerArray => innerArray)
      this.urls = []
      for (let i = 0; i < AllPhotoList.length; i++) {
        this.urls.push({
          desc: '',
          src: AllPhotoList[i].url
        })
      }
      this.previewCurrent = index
      console.log(this.urls)
      this.showMask = true
    }

  }
}
</script>

<style>
@import url('travelReport.css');
</style>
